<template>
  <div>{{ student.name }} 已经 {{ student.age }}岁了</div>
  <button @click="birthday">过生日</button>
  <hr>
  {{ msg }}
  <button @click="translate">翻译</button>
</template>


<script>
import { reactive, ref } from 'vue'

// reactive 执行时传入一个普通对象, 会返回一个响应式数据对象
const student = reactive({
  name: 'tom',
  age: 12
})
const birthday = () => {
  console.log('过生日');
  student.age++
}

// ref 执行时传入一个任意数据, 会返回一个响应式数据, 注意使用时如果在 script 范围内, 需要加 .value
const msg = ref('hello world')
const translate = () => {
  msg.value = '你好世界'
}

</script>